<template>
  <div class="flex-1 overflow-hidden h-full">
    <el-container id="container" class="h-full flex">
      <el-container class="flex flex-col h-full z-[9]">
        <el-header>
          <div class="h-full flex justify-between overflow-y-auto">
            <div class="flex items-center w-full justify-end">
              <span class="mr-3">v{{ version }}</span>
              <ThemeController />
              <InternationalController />
              <HistoryController />
              <!-- <PermissonManagement /> -->
            </div>
          </div>
        </el-header>
        <!-- 主页地图 -->
        <el-main class="flex-1">
          <RouterView v-slot="{ Component }">
            <keep-alive> <component :is="Component" /></keep-alive>
          </RouterView>
        </el-main>
        <TrackingDrawer />
      </el-container>
      <!-- 地图侧边栏状态 -->
      <el-aside width="20vw" class="flex flex-col h-full">
        <div class="border border-sky-400 flex-shrink-0">
          <NotificationDrawer />
        </div>
        <div class="flex-1 pt-2 overflow-hidden" @click="switchComponents.switchEvent">
          <MapShow v-show="!switchComponents.showComponent" class="h-full" />
          <VideoShow v-show="switchComponents.showComponent" class="h-full" />
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import MapShow from '../../components/MapShow'
import TrackingDrawer from '../../components/TrackingDrawer.vue'
import VideoShow from '../../components/VideoShow'
import { useHistory, useInternational, useTheme, useNotification } from '../../composables'
import { useSwitchComponents } from '../../stores/switchComponents'
import { RouterView } from 'vue-router'
import { version } from '../../../package.json'

const { HistoryController } = useHistory()
const { NotificationDrawer } = useNotification()
const { ThemeController } = useTheme()
const { InternationalController } = useInternational()
const switchComponents = useSwitchComponents()
</script>

<style scoped lang="scss">
.dark #container {
  background-color: #072232;
}
:deep(.maptalks-attribution) {
  display: none !important;
}
</style>
